<template>
	<view>
		<u-navbar title=" " leftIcon=" " placeholder :bgColor="bgColor" :border="false">
			<view class="left-wrap" slot="left" @click="show=true">
				<view class="lesson">
					<view class="lesson-name text-overfllow1">{{lessonName}}</view>
					<u-icon name="arrow-down" color="#000000" size="12" bold=""></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="water-fall">
			<view class="left">
				<view class="card-item shadow" v-for="i in 20" :key="i" v-if="i % 2 === 0" @click="goNoteDetail">
					<view class="card-top" :style="{height:$u.random(282, 378)+'rpx'}">
						<image mode="widthFix" class="card-img"></image>
						<view class="user text-overfllow1">
							<view class="user-avatar">
								<image mode="widthFix" class="avatar"></image>
							</view>
							<view class="username text-overfllow1">
								用户名称用户名称用户名称用户名称用户名称用户名称用户名称
							</view>
						</view>
					</view>
					<view class="card-bottom">
						<view class="title text-overfllow2">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</view>
						<view class="icon-btns">
							<view class="item">
								<u-icon name="heart" color="#000" size="12"></u-icon>
								<view class="icon-name">点赞</view>
							</view>
							<view class="item">
								<u-icon name="star" color="#000" size="12"></u-icon>
								<view class="icon-name">收藏</view>
							</view>
							<view class="item">
								<u-icon name="download" color="#000" size="12"></u-icon>
								<view class="icon-name">下载</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view class="card-item shadow" v-for="i in 20" :key="i" v-if="i % 2 !== 0" @click="goNoteDetail">
					<view class="card-top" :style="{height:$u.random(282, 378)+'rpx'}">
						<image mode="widthFix" class="card-img"></image>
						<view class="user text-overfllow1">
							<view class="user-avatar">
								<image mode="widthFix" class="avatar"></image>
							</view>
							<view class="username text-overfllow1">
								用户名称用户名称用户名称用户名称用户名称用户名称用户名称
							</view>
						</view>
					</view>
					<view class="card-bottom">
						<view class="title text-overfllow2">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</view>
						<view class="icon-btns">
							<view class="item">
								<u-icon name="heart" color="#000" size="12"></u-icon>
								<view class="icon-name">点赞</view>
							</view>
							<view class="item">
								<u-icon name="star" color="#000" size="12"></u-icon>
								<view class="icon-name">收藏</view>
							</view>
							<view class="item">
								<u-icon name="download" color="#000" size="12"></u-icon>
								<view class="icon-name">下载</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" confirmColor="#ed7b54" @cancel="show=false"
			@confirm="onConfirmLesson"></u-picker>
		<custom-tab-bar :currentIndex="1"></custom-tab-bar>
	</view>
</template>

<script>
	// 一维数组转二维
	function convertTo2DArray(arr, size) {
		const result = [];
		for (let i = 0; i < arr.length; i += size) {
			result.push(arr.slice(i, i + size));
		}
		return result;
	}
	export default {
		data() {
			return {
				bgColor: 'transparent',
				show: false,
				lessonName: '专业课',
				columns: [
					['专业课1', '专业课专业课2', '专业课专业课专业课3', '专业课专业课专业课专业课专业课专业课专业课专业课专业课专业课专业课专业课专业课专业课专业课4']
				]
			};
		},
		methods: {
			onConfirmLesson(e) {
				this.lessonName = e.value[0]
				this.show = false
			},
			goNoteDetail() {
				uni.navigateTo({
					url: './noteDetail'
				})
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 107px;
	}
</style>
<style lang="scss" scoped>
	.lesson {
		// width: 152rpx;
		height: 66rpx;
		border-radius: 10rpx;
		background: #FCFCFC;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;

		.lesson-name {
			max-width: 480rpx;
			margin-right: 5rpx;
			color: #7F84A3;
		}
	}

	.water-fall {
		margin: 44rpx 28rpx;
		display: flex;
		align-content: center;
		justify-content: space-between;
		box-sizing: border-box;

		.left,
		.right {
			flex: 1;
		}

		.left {
			margin-right: 20rpx;

			.card-item {
				.card-top {
					height: 282rpx;
				}
			}
		}

		.right {
			.card-item {
				.card-top {
					height: 378rpx;
				}
			}
		}

		.card-item {
			border-radius: 30rpx;
			overflow: hidden;
			margin-bottom: 24rpx;

			.card-top {
				position: relative;
				width: 100%;
				background: #F3F0EF;
				border-radius: 30rpx 30rpx 0 0;

				.card-img {
					width: 100%;
					height: 100%;
					border-radius: 30rpx 30rpx 0 0;
				}

				.user {
					position: absolute;
					left: 0;
					bottom: 10rpx;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					padding-left: 20rpx;

					.user-avatar {
						width: 36rpx;
						height: 36rpx;
						background: #D8D8D8;
						border-radius: 50%;
						flex-shrink: 0;

						.avatar {
							width: 100%;
							height: 100%;
							border-radius: 50%;

						}


					}

					.username {
						font-weight: 600;
						font-size: 18rpx;
						color: #3d3d3d;
						margin-left: 10rpx;
						padding-right: 10rpx;
						box-sizing: border-box;
					}
				}
			}

			.card-bottom {
				width: 100%;
				padding: 20rpx;
				background-color: #ffffff;
				border-radius: 0 0 30rpx 30rpx;
				box-sizing: border-box;

				.title {
					width: 100%;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					color: #3d3d3d;
					font-size: 24rpx;
					line-height: 34rpx;
					font-weight: 600;
				}

				.icon-btns {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.icon {
							width: 25rpx;
							height: 25rpx;
						}

						.icon-name {
							color: #3d3d3d;
							font-size: 12rpx;
							margin-top: 8rpx;
							font-weight: 600;
						}
					}
				}
			}
		}
	}
</style>